<template>
  <h1>1.组件的基本写法</h1>
  <p>{{ person }}</p>
  <button @click="changePerson">修改person的属性</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
/*
  wacth监视一个对象类型响应数据(ref)
    - wacth如果监听的是某个对象，则默认监听的是这个对象内部属性的变化(默认进行深度监听)

*/
//count逻辑
let person = ref({
  name: "老王",
  age: 18,
  score: {
    math: 100,
    en: 90,
  },
});
const changePerson = () => {
  person.value.score.math = 101;
};
//监视ref对象person
watch(person.value, (newVal, oldVal) => {
  console.log("count的监听", newVal, oldVal);
});
</script>

<style scoped></style>
